@import '../assets/theme.scss';

#publish{
  .publish{
    width: 940px;
    margin: 40px auto 0;
    .header{
      height: 60px;
      font-size: 30px;
      text-align: center;
      .icon{
        background-color: $color-main;
        border-radius: 50%;
        padding: 8px;
        color: #FFF;
      }
      color: $color-main;
    }
    .body{
      background-color: #FFF;
      box-shadow: 0 0 10px $color-forbid;
      padding-bottom: 20px;
      .uploadPic{
        $height: 200px;
        $img-width: 160px;
        height: $height;
        background-color: #F3F3F3;
        box-shadow: inset 0 0 10px #fff;
        margin-bottom: 50px;
        img{
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          display: block;
          border: none;
          max-height: $img-width;
          max-width: $img-width;
        }
        .block{
          position: relative;
          float: left;
          display: block;
          text-align: center;
          line-height: $img-width;
          height: $img-width;
          margin: ($height - $img-width)/2;
          width: $img-width;
          border: 1px dashed #ddd;
          background-color: #FFF;
          margin-right: 0;
          &.uploadBlock{
            cursor: default;
            color: #999;
            &.focus{
              border-color: #000;
              box-shadow: inset 2px 2px 4px rgba(0, 0, 0, .5);
              color: #000;
            }
          }
        }
      }
      .row{
        margin-top: 20px;
        span{
          line-height: 38px;
          color: #444;
          width: 290px;
          display: inline-block;
          text-align: right;
          margin-right: 20px;
        }
        &.detail{
          height: 90px;
        }
        input, textarea, select{
          height: 38px;
          line-height: 38px;
          padding-left: 10px;
          border-radius: 8px;
          outline: none;
          border: 1px solid $color-forbid + #333;
          background-color: #F5F5F5;
          &:focus{
            border-color: #64CBB3;
            background-color: transparent;
          }
          &.error{
            border-color: red;
          }
          &[readonly="readonly"]{
            color: #9C9C9C;
            cursor: not-allowed;
            border-color: $color-forbid + #333;
            background-color: #F5F5F5;
          }
        }
        textarea{
          position: absolute;
          height: 84px;
          resize: none;
          margin-left: 5px;
          line-height: 22px;
        }
        input[type="button"]{
          cursor: pointer;
          padding-right: 10px;
          &.select{
            border-color: #64CBB3;
            color: #64CBB3;
          }
        }
        select{
          cursor: pointer;
          appearance: none;
          -moz-appearance:none;
          -webkit-appearance: none;
          padding-right: 14px;
          option{
            display: inline-block;
            padding: 4px;
          }
        }
        select::-ms-expand { display: none; }
        .long{
          width: 480px;
        }
      }

      .publish-btn{
        width: 300px;
        height: 38px;
        line-height: 38px;
        border-radius: 20px;
        border: 1px solid $color-main;
        text-align: center;
        margin: 40px auto;
        cursor: pointer;
        background-color: $color-main;
        color: #FFF;
        transition: $default-transition;
        &:hover{
          background-color: $color-main - #333;
          box-shadow: 0 0 4px $color-main;
        }
        &:active{
          background-color: $color-main - #666;
        }
      }
    }
  }
}